<template>
  <m-box title="供应商合格率分布" size="small" class="warn-list">
    <barLineEchart :labels="labels" :bar-data="barData" :line-data="lineData" :loading="loading" />
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'
import barLineEchart from '@/views/Home/components/distributionOfSupplierQualificationRate/widgets/barLineEchart/index.vue'

const labels = ref(Array.from({ length: 7 }).map((_, i) => `供应商${i + 1}`))
const barData = ref(Array.from({ length: 7 }).map((_, i) => 0))
const lineData = ref(Array.from({ length: 7 }).map((_, i) => 0))
const loading = ref(false)

const getData = async () => {
  loading.value = true
  try {
    const res = await http.get('/v1/kanban/getSupplierQualificationRateReport')
    // console.log(res)
    let _labels = []
    let _data = []
    res.forEach((r) => {
      _labels.push(r.SUPPLIER_NAME)
      _data.push(r.QUALIFIED_QTY)
    })
    labels.value = _labels
    barData.value = _data
    lineData.value = _data
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.warn-list {
}
</style>
